<template>
	<view class="homeLayout pageBg">
		<custom-nav-bar title="推荐"></custom-nav-bar>
		 <view class="banner">
			 <swiper :indicator-dots="true" indicator-color="rgb(255,255,255,0.5)" 
			 indicator-active-color="#fff" autoplay :interval="3000" :duration="1000" circular>
			 	<swiper-item v-for="item in bannerList" :key="item._id">
					<navigator v-if="item.target == 'miniProgram'" 
					        :url="item.url" 
							class="like"
							target="miniProgram"
							:app-id="item.appid"
							>
						<image :src="item.picurl" mode="aspectFill" ></image>
					</navigator>
					<!-- 实用“`${item}`”来字符串拼接 -->
					<navigator v-else :url="`/pages/classlist/classlist?${item.url}`" class="like">
					    	<image :src="item.picurl" mode="aspectFill" ></image>
					</navigator>
			 	</swiper-item>
			 
			 </swiper>
		 </view>
		 
		 <view class="notice">
			 <view class="left">
				 <uni-icons type="sound-filled" size="30"></uni-icons>
				 <text class="text">公告</text>
			 </view>
			 <view class="center">
				 <swiper vertical interval="1500" duration="1000" circular autoplay>
				 	<swiper-item v-for="item in noticeList" :key="item.title"> 
						{{item.title}}
				 	</swiper-item>
				 </swiper>
			 </view>
			 <view class="right">
				 <uni-icons type="right" size="16" color="#333"></uni-icons>
			 </view>
		 </view>
		 
		 <view class="select">
			 <common-title>
				 <template #name>
				 	每日推荐
				 </template>
				 <template #custom>
					 <view class="date">
					 	<uni-icons type="calendar" size="18"></uni-icons>
						<view class="text">
							<uni-dateformat :date= "Date.now()" format="dd号"></uni-dateformat>
						</view>
						
					 </view>
				 </template>
			 </common-title>
			 <view class="content">
				<scroll-view scroll-x>
					<view class="box" v-for="item in tjList" :key="item._id">
						<image :src="item.smallPicurl" mode="aspectFill" @click="goPreview(item._id)"></image>
					</view>
				</scroll-view>
			 </view>
			  
		 </view>
		 
		 <view class="theme">
			 <common-title>
				 <template #name>
					专题精选
				 </template>
				 <template #custom>
					 <navigator url="/pages/classify/classify" open-type="reLaunch" class="more">More+</navigator>
				 </template>
			 </common-title>
			 
			 <view class="content">
				 <theme-item v-for="item in ztjxList" :key="item._id" :item = "item"></theme-item>
				 <theme-item :isMore = "true"></theme-item>
			 </view>
		 </view>
	</view>
</template>


<script setup>
import { computed, ref } from "vue";
import { GetApiBanner, GetApiRandom,GetApiNotice,GetApiClassify} from "@/api/api.js";
import { onShareAppMessage,onShareTimeline } from "@dcloudio/uni-app"

const bannerList = ref([])
const tjList = ref([])
const noticeList = ref([])
const ztjxList = ref([])

const getBanner = async()=>{
	let res = await GetApiBanner()
	bannerList.value = res.data.data
}
const getTj = async()=>{
	let res = await GetApiRandom()
	tjList.value = res.data.data
}
const getNotice = async()=>{
	let res = await GetApiNotice({select:true})
	noticeList.value = res.data.data
}
const getClassify = async()=>{
	let res = await GetApiClassify({
		// pageSize: 3,
		select: true
	})
	ztjxList.value = res.data.data
	console.log(res)
}



getBanner()
getTj()
getNotice()
getClassify()


function goPreview(id){
	uni.setStorageSync("storgClassList",tjList.value)
	uni.navigateTo({
		url:"/pages/preview/preview?id="+id
	})
}
//分享给好友
onShareAppMessage((e)=>{
	console.log(e)
	return {
		title:"咸虾米壁纸@@@",
		path:"/pages/index/index"
	}
})
//分享朋友圈
onShareTimeline(()=>{
	return {
		title:"咸虾米壁纸~~~",
		//imageUrl:"/static/images/logo.png"
	}
})


</script>

<style lang="scss" scoped>
.homeLayout {
	.banner {
		width: 750rpx;
		padding: 30rpx 0;
		swiper {
			width: 750rpx;
			height: 340rpx;
			&-item {
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				.like {
					width: 100%;
					height: 100%;
					image{
						width: 100%;
						height: 100%;
						border-radius: 30rpx;
					}
				}
			}
		}
	}
	
	.notice {
		margin: 0 30rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 690rpx;
		height: 80rpx;
		border-radius: 80rpx;
		background: #f9f9f9;
		
		.left {
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.text {
				color: $base-color;
				font-weight: 600;
				font-size: 28rpx;
			}
			:deep(){
				.uni-icons {
					color: $base-color !important;
				}
			}

		}
		
		.center {
			flex: 1;
			height: 100%;
			swiper {
				height: 100%;
				&-item {
					width: 50rpx;
					height: 100%;
					font-size: 30rpx;
					color: #666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
		.right {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 70rpx;
		}
	}
    
	.select {
		margin-top: 50rpx;
		.content {
			width: 720rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
			scroll-view {
				white-space: nowrap;
				.box {
					width: 200rpx;
					height: 430rpx;
					display: inline-block;
					margin-right: 15rpx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
				//给最后一个item设置距离
				.box:last-child {
				    margin-right: 30rpx;
				}
			}
		}
	    .date {
			color: $base-color;
			display: flex;
			align-items: center;
			.text {
				margin-left: 5rpx;
			}
			:deep(){
				.uni-icons {
					color: $base-color !important;
				}
			}

		}
	}
	
	.theme {
		padding: 50rpx 0;
		margin-top: 50rpx;
		.more {
			font-size: 32rpx;
			color: #888;
		}
		.content {
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: grid;
			gap: 15rpx;
			grid-template-columns: repeat(3,1fr);
			
		}
	}
}
</style>
